<template>
	<div class="footer-nav" @click="go">
		<router-link  class="nav-item" v-for="(item,index) in navs" :key="index" :to="item.link">
			<div class="footer-icon">
				<img :src="item.key==active?item.activeIcon:item.icon">
			</div>
			<span class="text">{{item.label}}</span>
		</router-link>
	</div>
</template>

<script>
	const items = (label, key, link) => ({
		label,
		link,
		key,
		icon: require(`../../assets/${key}.png`),
		activeIcon: require(`../../assets/${key}.x.png`),
	})
	export default {
		name: 'footer-nav',
		mounted() {
            this.active = this.$route.name;
        },
		data() {
			return {
				active:"shouye"
			}
        },
       methods:{
            go(){
            }
        },
		computed: {
			navs: function(){
				var userId = this.$route.query.userId
				var arr = [
					items('首页', 'shouye', '/'),
					items('分类', 'fenlei', '/ProductList'),
					items('经纪人', 'kaijiang', '/Lottery'),
					items('购物车', 'dingdan', '/Cart'),
					items('我的', 'wode', '/Personal')
				]
				return arr
			}
		},
		created(){
		}
	}
</script>

<style lang="less" scoped>
	.footer-nav {
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
		width: 100%;
        height: 96px;
        z-index: 600;
		background-color: #ffffff;
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.24);
		.nav-item {
			// padding: 0;
			display: flex;
			flex-direction: column;
            align-items: center;
            width:100%;
			justify-content: center;
			height: 100%;
			&::after {
				border: none;
			}
			.footer-icon {
				width:  42px
				;
				height: 48px
				;
				img {
					width: 100%;
				}
			}
			span {
				color: #444444;
			}
			&.active {
				span {
					color: #ff5558;
				}
			}
		}
	}
	.two-warp{
		padding-bottom: 80px;
    }
    .text{
        color: #ffab27;
        font-size: 20px;
    }
</style>


